Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

JavaScript Spread Operator

Spread Operators allows an iterable such as an array or string where zero or more arguments are expected. It allows us to obtain a list of parameters from an array. The spread operator is represented using ... operator.

Syntax:

var variableX = [...data];

The spread operator can be used in a function call or for an array literals or string or object literals.

Function Call Notation

functionName(...parameters);

Array literals Notation

[...arrayList,3,4,5];

Object literals Notation

let newObject = {...obj1};

Using spread operator in a function call:

            function addValues(a,b,c) {
    return a+b+c;
}

addValues(...[2,3,4]);

In the above program we have a addValues() function with 3 parameters. Now we can call addValues() function by applying spread operator with array of integers. Here the array of values length must match the number of parmaters in the addValues() function.

Using spread operator in object:

        let employee = {name:'Mark',gender:'male'};
let manager = {...employee,isManager:true};

console.log(manager);

Result

{name: "Mark", gender: "male", isManager: true}

In the above code we have created an object employee with name and gender as parameters. Now we create an object manager by combining the properties of employee object and add additional parameter isManager.

Using spread operator in an array:

The spread operator can be used in many cases, like when we want to perform expand, copy, concat operations.

Suppose if we want to concat two array and form a new array by combining the two array values we can achieve it by doing as mentioned below.

      let arr1 = [1,2,3,4,5];
let arr2 = [6,7,8,9,10];

let arr3 = [...arr1,...arr2];
console.log(arr3);

Result

[1,2,3,4,5,6,7,8,9,10]

Suppose if we want to copy the values in an array to an other array we can do something like below.

      let arr1 = [1,2,3,4,5];
let arr2 = arr1;
console.log(arr1);
console.log(arr2);
arr1.push(6);
console.log(arr1);
console.log(arr2);
        
    

Result:

[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5]
[1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6]

In the above example if we try to copy the values in arr1 to arr2 by assigning arr2 to arr1. Now when we push any value to arr1 will also affect arr2 since array is reference typed. If we want seperate copy in arr2 variable then you need to do something like below.

      let arr1 = [1,2,3,4,5];
let arr2 = [...arr1];
console.log(arr1);
console.log(arr2);
arr1.push(6);
console.log(arr1);
console.log(arr2);
            
    

Result:

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5, 6]

[1, 2, 3, 4, 5]

Suppose if we want to expand an array you can do something like below.

      let arr1 = [1,2,3,4,5];
let arr2 = [...arr1,6,7,8,9,10];
console.log(arr2);
                
    

Result:

[1,2,3,4,5,6,7,8,9,10]

Suppose if we want to perform any Math operation like finding min and max operation we can use spread operator.

Example

Math.max(1,2,3,4,5) will return 5 which is the maximum number in the list. Suppose if we have an array in which we need to find the maximum value and if we apply one like below

Math.max([1,2,3,4,5]) will return 'NaN'. We can fix this by something like below.

      let arr1 = [1,2,3,4,5];
Math.max(...arr1);

Result

JavaScript Spread Operator

Categories

Most Read